<!-- pages/login/components/mobile.vue -->
<script setup lang="ts">
import { ref } from 'vue';
import { getCodeApi, loginByMobileApi } from '@/apis/user'
import { useUserStore } from '@/store/user';

const showCountDown = ref(false)

const getMobileCode = async () => {
    try {
        // @ts-ignore
        await formRef.value?.validateField(['mobile'])
        const res = await getCodeApi({
            mobile: formData.value.mobile,
            type: 'login'
        })
        uni.showToast({
            title: '验证码发送成功',
            icon: 'success'
        })
        setTimeout(() => {
            formData.value.code = res.code
        }, 1000);
        showCountDown.value = true
    } catch (error) {
        console.log(error);
    }
}
const formRef = ref(null)
const formData = ref({
    mobile: '',
    code: ''
})
const formRules = {
    mobile: {
        rules: [
            { required: true, errorMessage: '请填写手机号码' },
            { pattern: '^1[3-9][0-9]{9}$', errorMessage: '手机号码格式不正确' },
        ],
    },
    code: {
        rules: [
            { required: true, errorMessage: '请输入验证码' },
            { pattern: '^[0-9]{6}$', errorMessage: '验证码格式不正确' },
        ],
    },
}

const isAgree = ref(false)
const store = useUserStore()
const onLogin = async () => {
    try {
        // 整体校验
        //@ts-ignore
        await formRef.value.validate()
        if (!isAgree.value) return uni.showToast({
            title: '请勾选用户协议',
            icon: 'none'
        })
        // 调用登录接口
        const res = await loginByMobileApi(formData.value)
        // 存储token
        store.token = res.token
        // 提示用户
        uni.showToast({
            title: '登录成功',
            icon: 'success'
        })
        // 跳转页面
        uni.switchTab({ url: '/pages/my/index' })
    } catch (error) {
        console.log(error);
    }

}
</script>

<template>
    <uni-forms class="login-form" ref="formRef" :model="formData" :rules="formRules">
        <uni-forms-item name="mobile">
            <uni-easyinput v-model="formData.mobile" :input-border="false" :clearable="false" placeholder="请输入手机号"
                placeholder-style="color: #C3C3C5" />
        </uni-forms-item>
        <uni-forms-item name="code">
            <uni-easyinput v-model="formData.code" :input-border="false" :clearable="false" placeholder="请输入验证码"
                placeholder-style="color: #C3C3C5" />
            <text class="text-button" v-if="!showCountDown" @click="getMobileCode">获取验证码</text>
            <view class="text-button" v-else>
                <uni-countdown :show-day="false" :show-hour="false" :show-minute="false" :second="59"
                    @timeup="showCountDown = false" />s后重新获取
            </view>
        </uni-forms-item>

        <view class="agreement">
            <radio :checked="isAgree" @click="isAgree = !isAgree" color="#16C2A3" />
            我已同意
            <text class="link">用户协议</text>
            及
            <text class="link">隐私协议</text>
        </view>

        <button class="uni-button" @click="onLogin">登 录</button>
    </uni-forms>
</template>

<style lang="scss">
@import './styles.scss';
</style>